/* Zuma Eats - call buttons, the checkout drop-off pin and the live
   tracking map (live-map.js). Red is the accent; every state on the map
   is also written in words, never only coloured. */

/* ---- round call buttons: restaurants, couriers ---- */
.call-btn{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid #e6e4e4;color:#ED1732;text-decoration:none;box-shadow:0 2px 8px rgb(0 0 0 / 6%);
  -webkit-tap-highlight-color:transparent;transition:transform .15s}
.call-btn:active{transform:scale(.94)}
.call-btn:focus-visible{outline:3px solid #ff9aa4;outline-offset:2px}
.call-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.call-btn.sm{width:30px;height:30px;box-shadow:none}
.call-btn.sm svg{width:15px;height:15px}
.call-btn.lg,.call-btn.lo-call{width:46px;height:46px;background:#ED1732;border-color:#ED1732;color:#fff;box-shadow:0 8px 20px rgb(237 23 50 / 25%)}
.call-btn.lg svg,.call-btn.lo-call svg{width:21px;height:21px}
.rtitle{display:flex;align-items:center;justify-content:space-between;gap:14px}
.rtitle h1{min-width:0}
.rcard-title{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.rcard-title .rcard-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.rcard.soon .rcard-title .rcard-name{padding:12px 0 0 2px}
.rcard.soon .rcard-title .call-btn{margin-top:10px}
.shut-tel{display:inline-flex;align-items:center;gap:7px;color:#111;font-weight:700;text-decoration:none}
.shut-tel svg{width:16px;height:16px;stroke:#ED1732;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- live order card: courier call + the way into the map ---- */
.lo-courier{align-items:center}
.lo-courier-txt{flex:1;min-width:0}
.lo-map{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0 0 10px;padding:13px 16px}
.lo-map svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- checkout: where it goes ---- */
.ck-drop{border-top:8px solid #f6f5f5;padding:20px clamp(16px,5vw,28px) 18px}
.ck-drop h2{font-size:1.05rem;letter-spacing:-.02em;margin:0 0 4px}
.ck-drop .au-label{margin-top:14px}
.ck-drop .au-input{font-size:.98rem;padding:14px 15px}
.ck-drop-map{position:relative;height:190px;border-radius:16px;overflow:hidden;background:#f1efee;border:1px solid #ecebeb}
.ck-drop-map.is-off{display:none}
.ck-drop-map .ck-drop-canvas{position:absolute;inset:0}
.ck-drop-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);margin:0;z-index:2;pointer-events:none;
  background:#111;color:#fff;font-size:.8rem;font-weight:600;padding:7px 12px;border-radius:99px;white-space:nowrap}
.ck-drop-pin{display:flex;flex-direction:column;align-items:center;cursor:grab;touch-action:none}
.ck-drop-pin-ic{width:38px;height:38px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:#ED1732;display:grid;place-items:center;
  box-shadow:0 6px 14px rgb(0 0 0 / 25%);border:2px solid #fff}
.ck-drop-pin-ic svg{width:18px;height:18px;transform:rotate(45deg);stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck-drop-pin-tag{order:-1;margin-bottom:6px;background:#fff;color:#111;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:99px;box-shadow:0 2px 8px rgb(0 0 0 / 18%)}
.ck-drop-area{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:.86rem;font-weight:600;color:#111}
.ck-drop-area svg{width:17px;height:17px;stroke:#111;stroke-width:2;fill:none;flex:none}
.ck-locate{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px}
.ck-locate svg{width:18px;height:18px;stroke:#ED1732;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck-locate[aria-busy="true"]{opacity:.7}
.ck-drop-why{font-size:.78rem;line-height:1.5;color:#8a8a8f;margin:8px 0 0}
.ck-drop-msg{font-size:.84rem;line-height:1.5;color:#111;margin:8px 0 0}
.ck-drop-msg:empty{display:none}
.ck-need{margin:8px 0 0;text-align:center;font-size:.8rem;color:#6d6d72}
.ck-need:empty{display:none}

/* ---- the tracking screen ---- */
#track-host:empty{display:none}
body.track-open{overflow:hidden}
.tk{position:fixed;inset:0;z-index:70;background:#eceae7;overflow:hidden;animation:rsIn .26s cubic-bezier(.16,1,.3,1) both}
.tk .tk-map{position:absolute;inset:0}  /* beats maplibre's own position:relative */
.tk-nomap .tk-map{display:none}
.tk-nomap .tk{background:linear-gradient(180deg,#fff4f5 0%,#fff 55%)}
.tk-back{position:absolute;z-index:3;left:14px;top:max(14px,env(safe-area-inset-top,14px));width:44px;height:44px;border-radius:50%;border:0;background:#fff;
  display:grid;place-items:center;box-shadow:0 4px 16px rgb(0 0 0 / 18%)}
.tk-back svg{width:21px;height:21px;stroke:#111;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tk-chip{position:absolute;z-index:3;left:68px;right:14px;top:max(18px,calc(env(safe-area-inset-top,14px) + 4px));width:max-content;max-width:calc(100% - 82px);
  display:flex;align-items:center;gap:8px;background:#111;color:#fff;font-size:.82rem;font-weight:600;line-height:1.25;padding:9px 13px 9px 9px;border-radius:99px;
  box-shadow:0 4px 16px rgb(0 0 0 / 22%)}
.tk-chip:empty{display:none}
.tk-chip-ic{width:22px;height:22px;border-radius:50%;background:#ED1732;display:grid;place-items:center;flex:none}
.tk-chip-ic svg{width:14px;height:14px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tk-chip[data-phase="finding"] .tk-chip-ic{animation:tkPulse 1.6s ease-in-out infinite}
.tk-nomap .tk-chip{display:none}

.tk-sheet{position:absolute;z-index:4;left:0;right:0;bottom:0;max-height:72%;overflow-y:auto;overscroll-behavior:contain;background:#fff;
  border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgb(0 0 0 / 14%);padding:0 18px calc(18px + env(safe-area-inset-bottom));
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tk-sheet.is-dragging{transition:none}
.tk-sheet.is-peek{transform:translateY(calc(100% - 168px));overflow:hidden}
.tk-nomap .tk-sheet{top:max(74px,calc(env(safe-area-inset-top,14px) + 64px));max-height:none;border-radius:22px 22px 0 0}
.tk-nomap .tk-sheet.is-peek{transform:none}
@media(min-width:760px){.tk-sheet{left:24px;right:auto;width:400px;bottom:24px;border-radius:22px;max-height:calc(100% - 110px)}}
.tk-grab{display:block;width:100%;height:26px;border:0;background:none;padding:0;cursor:grab;touch-action:none;position:sticky;top:0;z-index:1;background:#fff}
.tk-grab span{display:block;width:40px;height:5px;border-radius:3px;background:#d8d6d6;margin:9px auto 0}
.tk-eta{font:700 1.6rem/1.15 var(--sf);letter-spacing:-.03em;margin:4px 0 6px;color:#111}
.tk-line{margin:0 0 14px;color:#4a4a4f;font-size:.92rem;line-height:1.45}

.tk-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tk-steps li{position:relative;padding-top:12px;font-size:.72rem;line-height:1.25;color:#8a8a8f;display:flex;gap:4px;align-items:flex-start}
.tk-steps li:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px;background:#ecebeb}
.tk-steps li.is-done:before{background:#111}
.tk-steps li.is-now:before{background:linear-gradient(90deg,#ED1732 0 55%,#ecebeb 55%)}
.tk-steps li.is-now{color:#111;font-weight:700}
.tk-steps li.is-done{color:#4a4a4f}
.tk-steps i{display:none}
.tk-steps li.is-done i{display:inline-grid;flex:none}
.tk-steps i svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.6;fill:none}
.tk .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.tk-courier{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #f0efef}
.tk-courier-av{width:46px;height:46px;border-radius:50%;background:#f3f1f1;display:grid;place-items:center;flex:none}
.tk-courier-av svg{width:24px;height:24px;stroke:#111;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tk-courier-txt{flex:1;min-width:0}
.tk-courier-txt b{display:block;font-size:1rem}
.tk-courier-txt small{display:block;color:#6d6d72;font-size:.82rem;line-height:1.45}
.tk-courier .tk-stale{color:#111;font-weight:600}
.tk-pin{margin:6px 0 10px}
.tk-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #f0efef}
.tk-row>div{flex:1;min-width:0}
.tk-row b{display:block;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-row small{display:block;color:#6d6d72;font-size:.8rem}
.tk-row-ic{width:38px;height:38px;border-radius:12px;background:#f6f5f5;display:grid;place-items:center;flex:none}
.tk-row-ic svg{width:19px;height:19px;stroke:#333;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* markers */
.tk-mk{position:relative;display:grid;place-items:center}
.tk-mk-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2.5px solid #111;box-shadow:0 4px 12px rgb(0 0 0 / 25%);position:relative;z-index:1}
.tk-mk-dot svg{width:19px;height:19px;stroke:#111;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tk-mk-tag{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:#111;
  font:700 .7rem/1 var(--sf);padding:4px 7px;border-radius:99px;box-shadow:0 2px 8px rgb(0 0 0 / 18%)}
.tk-mk-dest .tk-mk-dot{background:#ED1732;border-color:#fff}
.tk-mk-dest .tk-mk-dot svg{stroke:#fff}
.tk-mk-store.is-waiting:before{content:"";position:absolute;width:38px;height:38px;border-radius:50%;background:rgb(237 23 50 / 35%);animation:tkRing 1.8s ease-out infinite}
.tk-mk-courier .tk-mk-dot{width:44px;height:44px;background:#111;border-color:#fff}
.tk-mk-courier .tk-mk-dot svg{stroke:#fff;width:23px;height:23px}
.tk-mk-head{position:absolute;inset:-12px;display:block;transition:transform .2s linear}
.tk-mk-head:before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid #ED1732}
@keyframes tkRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes tkPulse{50%{transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.tk-mk-store.is-waiting:before,.tk-chip[data-phase="finding"] .tk-chip-ic{animation:none}}
.tk .maplibregl-ctrl-bottom-right,.tk .maplibregl-ctrl-bottom-left{bottom:auto;top:max(66px,calc(env(safe-area-inset-top,14px) + 56px))}
.tk-nomap .tk-grab{visibility:hidden}
.rphone{display:inline-block;margin-top:6px;color:#111;font-weight:600;font-size:.92rem;text-decoration:none;font-variant-numeric:tabular-nums}

/* ---- the map credit ----
   TomTom's terms and OpenStreetMap's licence need the credit on screen, so
   it is never removed, only made quiet: folded (quietAttribution() in
   live-map.js) it is a small faint (i), and a tap opens the words at a size
   that can be read. On the tracking screen it sits under the status chip,
   clear of the back button and the sheet; on the checkout pin map it keeps
   the bottom right corner, away from the hint and the pin. MapLibre's own
   sheet is injected after this one, hence the extra .maplibregl-map. */
.maplibregl-map .maplibregl-ctrl-attrib.maplibregl-compact{margin:6px;min-height:20px;padding:0 20px 0 0;border-radius:10px;background:rgb(255 255 255 / 55%);opacity:.55;transition:opacity .2s}
.maplibregl-map .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{width:20px;height:20px;border-radius:10px;background-size:16px 16px;background-position:center;background-repeat:no-repeat;background-color:transparent}
.maplibregl-map .maplibregl-ctrl-attrib.maplibregl-compact-show{opacity:1;padding:1px 22px 1px 8px;background:rgb(255 255 255 / 94%);font-size:10px;line-height:18px;max-width:calc(100vw - 96px)}
@media(prefers-reduced-motion:reduce){.maplibregl-map .maplibregl-ctrl-attrib.maplibregl-compact{transition:none}}