/* runnr.org: the customer pages of the website (booking, errand, My errands, Profile). Website colours and type. */
.site-page{background:#F6F8F1;min-height:calc(100vh - 68px);padding:28px 0 64px}
.sp-wrap{max-width:1040px;margin:0 auto;padding:0 clamp(16px,4vw,32px);display:grid;gap:16px}
.sp-back{color:var(--navy);font-weight:700;text-decoration:none;justify-self:start}
.sp-back:hover{text-decoration:underline}
.sp-loading{display:flex;align-items:center;gap:10px;color:var(--muted);margin:40px auto;justify-content:center}
.sp-hero{display:flex;align-items:center;gap:20px;background:var(--lime);border-radius:24px;padding:22px 26px}
.sp-hero img{width:92px;height:92px;border-radius:50%;background:#fff;padding:8px;flex:0 0 auto}
.sp-hero h1,.sp-title h1,.sp-thead h1,.sp-empty h1{margin:0;font-family:var(--head);font-style:italic;font-weight:800;color:var(--navy);font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.05}
.sp-hero p{margin:6px 0 0;color:var(--navy);font-size:1.05rem}
.sp-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sp-h2{margin:10px 0 0;font-size:1.1rem;color:var(--navy)}
.sp-rules{background:#fff;border:1.5px solid #DCE6C2;border-left:6px solid var(--lime);border-radius:16px;padding:14px 18px;color:var(--navy)}
.sp-rules ul{margin:6px 0 0;padding-left:20px;color:var(--muted)}
.sp-rules.warn{border-left-color:#E8A33D}
.sp-card{background:#fff;border:1px solid #E6EAF0;border-radius:20px;padding:20px 22px;display:grid;gap:12px;align-content:start}
.sp-card.muted{opacity:.75}
.sp-card h2{margin:0;font-size:1.15rem;color:var(--navy);display:flex;align-items:center;gap:10px}
.sp-card h2 i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--lime);display:grid;place-items:center;font-size:.9rem;flex:0 0 auto}
.sp-card p{margin:0}
.sp-card textarea,.sp-card input[type=text],.sp-card input[type=number],.sp-card input[type=tel],.sp-in{width:100%;border:1.5px solid #DCE1EC;border-radius:12px;padding:12px 14px;font:500 1rem var(--font);color:var(--navy);background:#fff;box-sizing:border-box}
.sp-card textarea{resize:vertical;min-height:96px}
.sp-card textarea:focus,.sp-card input:focus,.sp-in:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--lime-soft)}
.sp-field{display:grid;gap:8px}
.sp-lbl{font-weight:700;color:var(--navy);font-size:.95rem}
.sp-lbl.sm{font-size:.85rem;color:var(--muted);margin-top:4px}
.sp-note{color:var(--muted);font-size:.92rem;margin:0}
.sp-ok{color:#2E7D32;font-weight:700;margin:0}
.sp-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--navy);text-decoration:underline;cursor:pointer;justify-self:start}
.sp-addr{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid #DCE1EC;border-radius:14px;padding:12px 14px}
.sp-addr div{display:grid;gap:2px;min-width:0}
.sp-addr b{color:var(--navy)}
.sp-addr small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-add{border:1.5px dashed #B9C96E;background:var(--lime-wash);border-radius:14px;padding:16px;text-align:left;font:700 1rem var(--font);color:var(--navy);cursor:pointer}
.sp-add:hover{border-color:var(--navy)}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px}
.sp-chips.need{outline:2px solid #C0392B;outline-offset:4px;border-radius:12px}
.sp-chip{border:1.5px solid #DCE1EC;background:#fff;border-radius:999px;padding:9px 16px;font:600 .95rem var(--font);color:var(--navy);cursor:pointer}
.sp-chip:hover{border-color:var(--navy)}
.sp-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--lime)}
.sp-chip:disabled{opacity:.5;cursor:default}
.sp-photo,.sp-photo-add{display:flex;align-items:center;gap:12px;color:var(--navy);font-weight:600;cursor:pointer}
.sp-photo img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.sp-photo span{flex:1;color:var(--muted);font-weight:500}
.sp-opts,.sp-rides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp-rides{grid-template-columns:repeat(4,1fr)}
.sp-opt,.sp-ride{display:grid;gap:4px;text-align:left;border:1.5px solid #DCE1EC;background:#fff;border-radius:16px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--navy)}
.sp-opt b,.sp-ride b{font-size:1.05rem}
.sp-opt small,.sp-ride small{color:var(--muted);line-height:1.35}
.sp-opt span{font-weight:800;font-size:1.3rem;margin-top:4px}
.sp-ride span{font-weight:700;font-size:.9rem;margin-top:2px}
.sp-opt:hover,.sp-ride:hover{border-color:var(--navy)}
.sp-opt[aria-pressed="true"],.sp-ride[aria-pressed="true"]{border:2px solid var(--navy);background:var(--lime-wash);box-shadow:0 0 0 3px var(--lime-soft)}
.sp-opt:disabled,.sp-ride:disabled{opacity:.45;cursor:default}
.sp-slots{display:grid;gap:8px;border-top:1px solid #EEF0F3;padding-top:12px}
.sp-lines{display:grid;gap:8px}
.sp-lines>div{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.sp-lines .tot{border-top:1px solid #E6EAF0;padding-top:10px;color:var(--navy);font-weight:800;font-size:1.15rem}
.sp-pay{display:grid;gap:12px;border-top:1px solid #E6EAF0;padding-top:14px}
.sp-pay-el{min-height:120px}
.au-btn.danger{color:#B3261E;border-color:#F0C9C5}
.au-btn.danger.armed{background:#B3261E;color:#fff;border-color:#B3261E}
.au-btn{position:relative}
/* Errand page */
.sp-thead{display:grid;gap:6px}
.sp-eta{margin:0;font-weight:700;color:var(--navy);font-size:1.1rem}
.sp-tgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.sp-col{display:grid;gap:16px}
.sp-map{height:320px;border-radius:20px;overflow:hidden;border:1px solid #E6EAF0;background:#EEF1E8}
.sp-map[hidden]{display:none}
.sp-dot{display:block;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);background:var(--navy)}
.sp-dot.drop{background:var(--lime);border-color:var(--navy)}
.sp-dot.run{background:#2E7DFF}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:s}
.sp-steps li{position:relative;padding-top:12px;font-size:.85rem;color:var(--muted);font-weight:600}
.sp-steps li::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:6px;background:#E3E7DA}
.sp-steps li.done::before{background:var(--navy)}
.sp-steps li.now::before{background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--navy)}
.sp-steps li.now{color:var(--navy)}
.sp-runner{grid-template-columns:auto 1fr;align-items:center}
.sp-runner>div:nth-child(2){display:grid;gap:2px}
.sp-runner span{color:var(--muted)}
.sp-av{width:52px;height:52px;border-radius:50%;background:var(--lime);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:1.3rem}
.sp-runner .sp-acts,.sp-runner .sp-note{grid-column:1/-1}
.sp-acts{display:flex;gap:10px;flex-wrap:wrap}
.sp-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:#E5484D;color:#fff;font:700 .75rem/20px var(--font);font-style:normal;padding:0 5px}
.sp-badge[hidden]{display:none}
.sp-proof img{width:100%;max-height:360px;object-fit:cover;border-radius:14px}
.sp-stars{display:flex;gap:6px}
.sp-stars button{border:0;background:none;font-size:2rem;line-height:1;color:#D5DAE3;cursor:pointer;padding:0}
.sp-stars button.on{color:#F2B705}
.sp-legs{display:grid;gap:12px}
.sp-legs>div{display:flex;gap:12px;align-items:flex-start}
.sp-legs i{width:12px;height:12px;border-radius:50%;background:var(--navy);margin-top:5px;flex:0 0 auto}
.sp-legs i.to{background:var(--lime);box-shadow:inset 0 0 0 2px var(--navy)}
.sp-legs span{display:grid;gap:2px;color:var(--navy);font-weight:600}
.sp-legs small{color:var(--muted);font-weight:500}
.sp-notes{background:#F6F8F1;border-radius:12px;padding:10px 12px;color:var(--navy);white-space:pre-line}
.sp-paybox b{color:var(--navy)}
.sp-paybox span{color:var(--muted)}
/* My errands */
.sp-olist{display:grid;gap:10px}
.sp-orow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid #E6EAF0;border-radius:16px;padding:14px 18px;text-decoration:none;color:var(--navy)}
.sp-orow:hover{border-color:var(--navy)}
.sp-ocol{display:grid;gap:2px;min-width:0}
.sp-ocol small{color:var(--muted)}
.sp-oamt{font-weight:800}
.sp-pill{border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:700;background:#EEF0F3;color:var(--navy);white-space:nowrap}
.sp-pill.s-searching,.sp-pill.s-accepted,.sp-pill.s-at_pickup,.sp-pill.s-picked{background:var(--lime)}
.sp-pill.s-delivered{background:var(--navy);color:#fff}
.sp-empty{background:#fff;border:1px solid #E6EAF0;border-radius:20px;padding:28px;text-align:center;display:grid;gap:12px;justify-items:center;color:var(--muted)}
/* Saved addresses, help */
.sp-alist{display:grid;gap:8px}
.sp-arow{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;border:1.5px solid #DCE1EC;background:#fff;border-radius:14px;padding:12px 14px;font:inherit;color:var(--navy)}
button.sp-arow{cursor:pointer}
button.sp-arow:hover{border-color:var(--navy)}
.sp-arow>span,button.sp-arow{display:grid;gap:2px}
.sp-arow small{color:var(--muted)}
.sp-reply{background:var(--lime-wash);border-radius:8px;padding:6px 8px;color:var(--navy)!important}
/* Address window */
.au-box.wide{width:min(620px,100%)}
.sp-search{position:relative}
.sp-search input{width:100%;height:50px;border:1.5px solid #DCE1EC;border-radius:12px;padding:0 14px;font:500 1rem var(--font);box-sizing:border-box}
.sp-sugs{position:absolute;left:0;right:0;top:54px;z-index:1000;background:#fff;border:1px solid #DCE1EC;border-radius:14px;box-shadow:0 14px 30px rgba(22,33,58,.15);overflow:hidden;max-height:300px;overflow-y:auto}
.sp-sugs[hidden]{display:none}
.sp-sugs button{display:grid;gap:2px;width:100%;text-align:left;border:0;border-bottom:1px solid #EEF0F3;background:#fff;padding:10px 14px;font:inherit;cursor:pointer;color:var(--navy)}
.sp-sugs button:hover{background:var(--lime-wash)}
.sp-sugs span{color:var(--muted);font-size:.88rem}
.sp-amap{position:relative;height:300px;border-radius:16px;overflow:hidden;border:1px solid #E6EAF0}
.sp-amap>div{position:absolute;inset:0}
.sp-pin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--navy);border:3px solid var(--lime);z-index:500;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,.3)}
/* Chat */
.sp-chat{height:min(46vh,380px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:#F6F8F1;border-radius:14px;padding:12px}
.sp-msg{max-width:80%;display:grid;gap:3px;padding:9px 12px;border-radius:14px;background:#fff;border:1px solid #E6EAF0;align-self:flex-start;color:var(--navy)}
.sp-msg.me{align-self:flex-end;background:var(--navy);color:#fff;border-color:var(--navy)}
.sp-msg small{opacity:.7;font-size:.75rem}
.sp-chatf{display:flex;gap:8px}
.sp-chatf input{flex:1;min-width:0;height:50px;border:1.5px solid #DCE1EC;border-radius:12px;padding:0 14px;font:500 1rem var(--font)}
.toast{z-index:300!important}
@media (max-width:860px){.sp-tgrid{grid-template-columns:1fr}.sp-rides{grid-template-columns:1fr 1fr}.sp-map{height:260px}}
@media (max-width:520px){.sp-opts{grid-template-columns:1fr}.sp-hero{padding:16px;gap:14px}.sp-hero img{width:68px;height:68px}.sp-card{padding:16px}.sp-orow{grid-template-columns:1fr auto}.sp-orow .sp-pill{grid-column:1/-1;justify-self:start}.sp-steps li{font-size:.75rem}}
.au-box{grid-template-columns:minmax(0,1fr)}
.sp-chat>p{margin:auto 0!important}
.site-page h1,.site-page h2,.site-page h3{text-align:left}
.sp-modal .au-box h2{text-align:center}