/* T4us rider / customer portal: COMPUTER layout (desktop.php). The phone version (ride.php) is untouched. */
.devlink{text-align:center;color:var(--ink2);font-size:13px;margin:18px 0 4px}.devlink a{color:var(--ink);font-weight:700}
body.desk .stage{padding:0}
body.desk .phone{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0;box-shadow:none}
@media (max-width:899px){body.desk .phone{max-width:none}}

/* ---- sign in: picture on the left, form on the right ---- */
body.desk #auth{flex-direction:row}
body.desk #auth .hero{height:100%;width:56%;min-height:0;flex:none}
body.desk #auth .hero .brand{left:48px;bottom:56px;transform:scale(1.3);transform-origin:left bottom}
body.desk #auth .auth-card{margin:0;border-radius:0;flex:1;display:flex;align-items:center;justify-content:center;padding:40px;box-shadow:-12px 0 40px rgba(0,0,0,.08)}
body.desk #auth .auth-inner{width:100%;max-width:420px}

/* ---- the bottom tab bar becomes a left side menu ---- */
body.desk .bnav{left:0;right:auto;top:0;bottom:0;width:236px;height:auto;display:flex;flex-direction:column;gap:6px;padding:92px 14px 18px;border-top:0;border-right:1px solid var(--line);box-shadow:none;background:var(--surface)}
body.desk .bnav::before{content:"Transport4us";position:absolute;left:20px;top:26px;font-weight:800;font-size:21px;letter-spacing:-.02em;padding-left:50px;line-height:40px;background:url(logo.svg) left center/38px 38px no-repeat}
body.desk .bnav button{flex:none;flex-direction:row;justify-content:flex-start;gap:14px;height:50px;padding:0 16px;font-size:15px;border-radius:14px;width:100%;text-align:left}
body.desk .bnav button:hover{background:var(--surface2);color:var(--ink)}
body.desk .bnav button svg{width:22px;height:22px;flex:none}
body.desk .bnav button.on::before{top:12px;bottom:12px;left:-14px;margin:0;width:4px;height:auto}
body.desk .bnav button.live::after{top:19px;left:auto;right:16px}
body.desk .phone.hasnav .screen{left:236px;bottom:0}

/* ---- pages: centred, comfortable reading width ---- */
body.desk .top{padding-left:max(40px,calc((100% - 1040px)/2));padding-right:max(40px,calc((100% - 1040px)/2));padding-top:26px}
body.desk .top .brand .logo{display:none}
body.desk .top .wordmark{font-size:26px}
body.desk .scroll{padding-left:max(40px,calc((100% - 1040px)/2));padding-right:max(40px,calc((100% - 1040px)/2));padding-bottom:48px}
body.desk .scroll>*{max-width:1040px;margin-left:0;margin-right:0}
body.desk #homeList>.greet,body.desk #homeList>.sub,body.desk #homeList>.privacy,body.desk #homeList>h2,body.desk #homeList>h3{grid-column:1/-1}
body.desk .toasts{left:260px;right:auto;top:18px}
body.desk .greet{font-size:32px}
body.desk #homeList{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:18px;align-items:start}
body.desk #homeList>*{margin:0}
body.desk #bkList,body.desk #portalScroll,body.desk #acctScroll{max-width:1040px}
body.desk #bookScroll>*,body.desk #portalScroll>*{max-width:760px}
body.desk #acctScroll>*{max-width:640px}
body.desk .btn{width:auto;min-width:200px}body.desk .btn.sm{min-width:0}
body.desk form .btn,body.desk .p-btns .btn,body.desk #bookScroll .btn{width:100%}
body.desk .p-btns{display:flex;gap:10px;flex-wrap:wrap}body.desk .p-btns .btn{width:auto}
body.desk button,body.desk a.btn{transition:transform .15s,box-shadow .2s,opacity .15s}
body.desk .btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px rgba(70,160,235,.35)}
body.desk .stepbar{max-width:760px}
body.desk .field input,body.desk .field select,body.desk .field textarea{font-size:16px}

/* ---- live map: full-size map with the trip details as a panel on the right ---- */
body.desk #live .map,body.desk #live .nomap{right:420px}
body.desk #live .sheet{left:auto;right:0;top:0;bottom:0;width:420px;height:100%!important;border-radius:0;box-shadow:-10px 0 40px rgba(0,0,0,.14);transform:none!important;visibility:visible!important;animation:none!important;padding:26px 24px}
body.desk #live .detbtn{display:none}
body.desk #live .live-top{right:420px}
body.desk #live .etawrap{right:440px;left:0}
body.desk #live .mapctl{right:440px;top:calc(max(14px,env(safe-area-inset-top,0px)) + 142px)}
body.desk .sheet:not(.open) .steps,body.desk .sheet:not(.open) .steplabels{margin:14px 0}
body.desk .more{display:none}

@media (max-width:1100px){body.desk .bnav{width:76px;padding-top:84px}body.desk .bnav::before{content:"";display:block;height:38px;padding:0;left:19px;width:38px}body.desk .bnav button{justify-content:center;padding:0;font-size:0;gap:0}body.desk .phone.hasnav .screen{left:76px}body.desk #live .map,body.desk #live .nomap,body.desk #live .live-top{right:360px}body.desk #live .sheet{width:360px}body.desk #live .etawrap,body.desk #live .mapctl{right:380px}}
@media (min-width:1500px){body.desk .bnav{width:260px}body.desk .phone.hasnav .screen{left:260px}body.desk #homeList{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}}

/* ---- account page: wide profile card + tile grid instead of a phone-style list ---- */
body.desk #acctScroll>*,body.desk #portalScroll>.acct,body.desk #portalScroll>.alist,body.desk #portalScroll>.privacy{max-width:1040px}
body.desk .acct{padding:28px 32px;gap:22px;border-radius:24px;margin:8px 0 24px;background:linear-gradient(120deg,#d4ecff,#eaf5ff 60%,#fff);border:1px solid var(--line);box-shadow:0 10px 30px rgba(70,160,235,.15)}
body.desk .acct .av{width:88px;height:88px;font-size:30px;background:var(--btn);color:var(--btn-fg);box-shadow:0 8px 20px rgba(70,160,235,.4)}
body.desk .acct b{font-size:28px;letter-spacing:-.02em}body.desk .acct span{font-size:16px}
body.desk .alist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.desk .alist .btn{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;min-height:118px;padding:20px 22px;width:100%;min-width:0;font-size:17px;font-weight:700;text-align:left;white-space:normal;border-radius:20px;border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.05)}
body.desk .alist .btn:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 14px 28px rgba(70,160,235,.3);border-color:var(--btn)}
body.desk .alist .btn svg{width:30px;height:30px}
body.desk .alist .btn:not(.ghost){background:var(--surface2);color:#b3261e;border-color:#f1c9c6;justify-content:center}
body.desk .alist .btn .pbadge{margin-left:0}
body.desk .privacy{text-align:left;max-width:1040px}
@media (max-width:1100px){body.desk .alist{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.desk #acctScroll>*,body.desk #portalScroll>.acct,body.desk #portalScroll>.alist,body.desk #portalScroll>.privacy{max-width:1240px}
body.desk .alist .btn:not(.ghost){grid-column:1/-1;min-height:58px;flex-direction:row;align-items:center;justify-content:center;font-size:16px}
@media (min-width:1400px){body.desk .alist{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.desk #acctScroll,body.desk #portalScroll{max-width:none}
body.desk #acctScroll,body.desk #acctScroll~*{padding-left:max(40px,calc((100% - 1240px)/2));padding-right:max(40px,calc((100% - 1240px)/2))}
body.desk #account .top{padding-left:max(40px,calc((100% - 1240px)/2));padding-right:max(40px,calc((100% - 1240px)/2))}