/* The viewport is the app shell; only a content pane can scroll at extreme zoom or with the keyboard open. */
html,body{margin:0;overflow:hidden}
body{
  min-width:0;min-height:0;block-size:100vh;block-size:100dvh;
  display:grid;grid-template:"header" auto "banner" auto "main" minmax(0,1fr) "footer" auto / minmax(0,1fr);
}
.site-header{grid-area:header;width:100%;padding:clamp(9px,2vh,24px) clamp(14px,3vw,32px)}
.demo-banner{grid-area:banner;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;font-size:11px}
.demo-banner button{min-height:36px;padding:4px 7px;border:0;background:none;color:inherit;font-size:inherit;font-weight:750;text-decoration:underline}
main{grid-area:main;width:100%;min-width:0;min-height:0;margin:0 auto;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;padding:clamp(9px,2vh,24px) clamp(14px,3vw,32px)}
footer{grid-area:footer;width:100%;padding:10px clamp(14px,3vw,32px);line-height:1.3}
.home,.tracking,.tracking-grid{min-width:0;min-height:0}
.home{height:100%;grid-template-rows:minmax(0,1fr);gap:clamp(18px,4vw,64px)}
.intro{max-height:100%;overflow:auto}
.intro h1{font-size:clamp(44px,min(7vw,11vh),94px);margin:clamp(10px,2vh,22px) 0}
.journey-preview{margin:clamp(12px,3vh,35px) 0}
.lookup-card{width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;padding:clamp(17px,3.5vh,34px)}
.lookup-card .card-icon{margin-bottom:clamp(10px,2vh,20px)}
.lookup-card>p{margin-bottom:clamp(10px,2vh,22px)}
.lookup-card label{margin:clamp(10px,1.8vh,19px) 0 7px}
.lookup-card input{min-height:44px;height:clamp(44px,6vh,52px)}
.lookup-card input:focus,.lookup-card input:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);outline-offset:0}
.lookup-card .primary-button{min-height:46px;margin-top:clamp(12px,2.6vh,23px)}
.lookup-card .link-note{margin-top:clamp(12px,2.6vh,23px);padding-top:clamp(10px,2vh,20px)}
.tracking{height:100%;display:grid;grid-template:"title" auto "content" minmax(0,1fr) / minmax(0,1fr);gap:clamp(7px,1.5vh,15px)}
.tracking-header{grid-area:title;display:grid;min-width:0;gap:clamp(7px,1.5vh,15px)}
.tracking-top{margin:0}
.tracking-top h1{margin-top:5px}
.connection-notice{margin:0;padding:8px 12px}
.tracking-grid{grid-area:content;grid-template-columns:minmax(265px,clamp(280px,31vw,380px)) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(10px,1.5vw,22px);align-items:stretch}
.status-card,.waiting-card,.map-card{min-width:0;min-height:0}
.status-card,.waiting-card{overflow:auto;overscroll-behavior:contain;padding:clamp(13px,2.6vh,28px)}
.status-card h2{font-size:clamp(27px,5.1vh,42px);margin:clamp(8px,1.7vh,18px) 0 9px}
.status-card>p:not(.updated){line-height:1.55;margin:0 0 clamp(10px,1.8vh,20px)}
.eta{padding:clamp(9px,1.7vh,17px);margin-bottom:clamp(8px,1.5vh,20px);gap:4px}
.eta strong{font-size:clamp(23px,4vh,34px)}
.schedule{padding-bottom:clamp(6px,1.3vh,16px);margin-bottom:clamp(8px,1.3vh,17px)}
.progress{
  --step-size:27px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;margin:0;padding:10px 6px 9px;
  border:1px solid var(--line);border-radius:15px;background:var(--surface)
}
.progress li{
  min-width:0;display:grid;justify-items:center;align-content:start;gap:5px;
  position:relative;padding-inline:4px;text-align:center;color:#b2a69b
}
.progress li:not(:last-child)::after{
  content:"";position:absolute;left:calc(50% + var(--step-size)/2 + 5px);
  top:calc(var(--step-size)/2);width:calc(100% - var(--step-size) - 10px);
  height:1px;background:#493d32
}
.progress li.done:not(:last-child)::after{background:#3d6652}
.progress .step-mark{width:var(--step-size);height:var(--step-size)}
.progress strong{display:block;font-size:clamp(11px,1.15vw,13px);font-weight:650;line-height:1.25}
.step-short{display:none}
.updated{margin-top:clamp(8px,1.7vh,20px);padding-top:clamp(7px,1.2vh,14px)}
.waiting-copy{min-width:0}
.waiting-art{width:clamp(84px,20vh,165px);height:clamp(64px,15vh,130px);margin-bottom:clamp(8px,2vh,20px);flex-shrink:0}
.waiting-card .whatsapp-button{margin-top:clamp(10px,2vh,23px)}
.map-card{display:grid;min-height:0;grid-template:"heading" auto "map" minmax(0,1fr) "legend" auto "note" auto / minmax(0,1fr)}
.map-heading{grid-area:heading;padding:4px 11px}
#map{grid-area:map;min-height:0}
.map-legend{grid-area:legend;padding:7px 10px}
.route-note{grid-area:note;padding:0 10px 7px}
.demo-tools{position:fixed;inset:0;margin:auto;width:min(490px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:18px;box-shadow:0 22px 60px #0009}
.demo-tools::backdrop{background:#000a}
.demo-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-dialog-heading h2{font-size:16px;margin:0}
.demo-qr-link{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:#ffb277;font-weight:700}
@media(max-height:720px){
  footer{display:none}
  .journey-preview,.intro .privacy-note,.lookup-card .card-icon{display:none}
  .eta small{display:none}
}
@media(max-width:760px){
  .home{display:flex;align-items:center;justify-content:center}
  .intro{display:none}
  .lookup-card{max-width:470px}
  .tracking-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px}
  .tracking-grid .status-card{order:0}
  .tracking-grid .map-card{order:1}
  .tracking-grid .waiting-card{order:1}

  .tracking-grid.has-map .status-card h2{font-size:clamp(24px,4.5vh,36px);margin:6px 0}
  .tracking-grid.has-map .status-card>p,.tracking-grid.has-map .schedule{display:none}
  .tracking-grid.has-map .status-card .eta{margin:0;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px}
  .tracking-grid.has-map .eta small{display:none}
  .progress{--step-size:23px;padding-block:8px}
  .progress li{gap:4px}
  .progress .step-full{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .progress .step-short{display:inline}
  .waiting-card{
    align-self:stretch;flex-direction:row;justify-content:safe center;text-align:left;gap:12px;
    padding:12px;overflow:visible
  }
  .waiting-art{width:clamp(38px,14vw,64px);height:auto;aspect-ratio:6/5;margin:0}
  .waiting-card h3{font-size:clamp(21px,5vw,26px);line-height:1.08;margin:0 0 4px}
  .waiting-copy{max-width:360px}
  .waiting-card p{font-size:12px;line-height:1.45;max-width:none}
  .waiting-card .whatsapp-button{margin-top:8px}

}
@media(max-width:760px) and (max-height:550px){
  .site-header{padding-block:5px}
  .lookup-card .link-note{margin-top:8px;padding-top:7px}
  .waiting-art{display:none}

}

.payment-reminder{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:3px;align-items:center;
  margin:0 0 clamp(8px,1.5vh,17px);padding:9px 12px;
  background:#241c13;border:1px solid #644526;border-radius:12px;color:#ffcf99
}
.payment-reminder span{font-size:11px;font-weight:700}
.payment-reminder strong{grid-column:2;grid-row:1/3;text-align:right;font-size:clamp(15px,2.6vh,21px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.payment-reminder small{font-size:10px;color:var(--muted)}
@media(max-width:760px){
  .tracking-grid.has-map .delivery-facts:has(.eta:not([hidden])):has(.payment-reminder:not([hidden])){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px
  }
  .tracking-grid.has-map .delivery-facts:has(.payment-reminder:not([hidden])) .eta{
    flex-direction:column;align-items:flex-start;justify-content:center;gap:3px
  }
  .tracking-grid.has-map .delivery-facts:has(.payment-reminder:not([hidden])) .eta strong{
    font-size:clamp(17px,5.3vw,23px);white-space:nowrap
  }
  .tracking-grid.has-map .payment-reminder{margin:0;grid-template-columns:minmax(0,1fr)}
  .tracking-grid.has-map .payment-reminder strong{grid-column:1;grid-row:auto;text-align:left}
}

@media(max-width:760px) and (max-height:660px){
  .site-header{padding-block:5px}
  .site-header .brand img{width:56px;height:auto}
  .demo-banner button{min-height:29px}
  main{padding-block:7px}
  .tracking,.tracking-header{gap:6px}
  .tracking-top .eyebrow{display:none}
  .tracking-top h1{font-size:29px}
  .tracking-top .secondary-button{min-height:38px}
  .map-heading .map-center{height:38px}
  .tracking-grid.has-map .status-card{padding:9px 12px}
  .tracking-grid.has-map .status-kicker{display:none}
  .tracking-grid.has-map .status-card h2{font-size:25px;margin:0 0 6px}
  .tracking-grid.has-map .status-card .eta,.tracking-grid.has-map .payment-reminder{padding-block:5px}

  .map-heading{padding-block:2px}
}

@media(max-width:760px) and (max-height:550px){
  .tracking-grid .status-card{padding:9px 12px}
  .status-card h2{font-size:24px;margin:4px 0}
  .status-card>p:not(.updated){margin-bottom:6px}
  .status-card .updated{margin-top:5px;padding-top:4px}
  .schedule{padding-bottom:0;margin-bottom:4px;border:0}
  .waiting-card{padding:9px 12px}
}

/* Keep the order details and support action above the bottom of short viewports. */
@media(max-width:760px), (max-height:700px){
  .status-card{padding:11px 12px}
  .status-card h2{font-size:clamp(23px,4.5vh,31px);margin:4px 0 6px}
  .status-card>p:not(.updated){line-height:1.4;margin-bottom:7px}
  .status-card .schedule{padding:0;margin:0 0 5px;border:0}
  .status-card .updated{margin-top:4px;padding-top:3px;border:0}
  .payment-reminder{padding-block:6px;margin-bottom:5px}
  .waiting-card{padding:11px 12px}
  .waiting-card p{line-height:1.45}
}
@media(min-width:761px) and (max-height:700px){
  .tracking,.tracking-header{gap:7px}
  .tracking-top .eyebrow{display:none}
  .progress{padding-block:7px}
  .tracking-grid.has-map .status-card .schedule{display:none}
  .eta{padding:6px 9px;margin-bottom:6px}
  .waiting-art{width:95px;height:72px;margin-bottom:5px}
}
@media(max-width:760px) and (max-height:660px){
  .tracking-grid .status-kicker{display:none}
  .progress{--step-size:22px;padding-block:6px}
  .progress strong{font-size:10px;white-space:nowrap}
  .waiting-art{display:none}
}
@media(max-width:380px) and (max-height:660px){
  .site-header{gap:8px;padding-block:3px}
  .site-header .text-button{white-space:nowrap;padding-inline:0}
  .demo-banner{gap:6px;white-space:nowrap;font-size:9px}
  .demo-banner button{padding-inline:3px}
  .tracking-top{gap:6px}
  .tracking-top h1{font-size:25px;white-space:nowrap;margin:0}
  .tracking-top .secondary-button{gap:4px;padding-inline:7px}
  .tracking-top .secondary-button svg{width:15px;height:15px}
  .tracking-grid.has-map .status-card h2{font-size:23px}
  .status-card .updated{font-size:9px}
  .map-heading .map-center{height:32px}
  .map-legend{padding-block:4px}
}

@media(max-width:760px) and (max-height:510px){
  .status-card .schedule{margin-bottom:2px}
  .status-card .schedule>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
  .status-card .schedule svg{width:16px;height:16px}
  .status-card .updated{padding-top:0;margin-top:2px}
  .waiting-card{padding-block:8px}
  .waiting-card:has(.whatsapp-button:not([hidden])) :is(h3,p){display:none}
  .waiting-card .whatsapp-button{margin-top:0}
}

@media(max-width:760px) and (min-height:780px){
  .waiting-card{flex-direction:column;text-align:center;gap:16px}
  .waiting-art{width:clamp(72px,17vw,124px)}
}

.refresh-label{display:grid;justify-items:start;align-items:center;white-space:nowrap}
.refresh-label>span{grid-area:1/1}
.refresh-pending{visibility:hidden;font-size:.87em}
#refresh[aria-busy="true"] .refresh-idle{visibility:hidden}
#refresh[aria-busy="true"] .refresh-pending{visibility:visible}
@media(prefers-reduced-motion:no-preference){
  #refresh[aria-busy="true"] svg{animation:refresh-turn .85s linear infinite;transform-origin:50% 50%}
  @keyframes refresh-turn{to{transform:rotate(360deg)}}
}