/* Client portal QA + mobile polish. */
[hidden]{display:none!important}

.request-layout{align-items:start}
.route-aside{
  align-self:start;
  min-height:0;
  margin:24px 24px 24px 0;
  border:1px solid #262b25;
  border-radius:18px;
  overflow:hidden;
  background:var(--dark);
}
.route-aside .quote-card{flex:0 0 auto}
.request-map-shell{min-height:300px}

.role-gate-message{
  margin:0 0 16px;
  padding:13px 14px;
  border:1px solid #f2c9a8;
  border-radius:12px;
  background:#fff4ea;
  color:#7a3d00;
  font-size:11.5px;
  line-height:1.55;
}
.role-gate-message strong{display:block;margin-bottom:4px;color:#5e2f00}
.role-gate-message a{font-weight:900;text-decoration:underline;text-underline-offset:2px}

/* Rider is a bike, pickup stays green and drop-off stays orange. */
.map-marker.rider{
  width:36px!important;
  height:36px!important;
  margin:-9px 0 0 -9px;
  border:3px solid #fff!important;
  border-radius:13px!important;
  background:#3478f6!important;
  box-shadow:0 6px 18px rgba(0,0,0,.35)!important;
}
.map-marker.rider::before{
  content:"\1F6F5";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:19px;
  line-height:1;
}
.map-marker.rider::after{
  content:"";
  position:absolute;
  left:12px;
  bottom:-5px;
  width:9px;
  height:9px;
  transform:rotate(45deg);
  background:#3478f6;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  border-radius:2px;
}

@media(max-width:850px){
  main{padding:14px 12px 56px!important}
  .portal-header-inner{padding:9px 12px!important;min-height:60px!important}
  .brand-copy strong{font-size:10.5px!important}
  .brand-copy small{font-size:7.5px!important}
  .back-home span{display:none}
  .header-btn,.back-home{padding:7px 9px!important;min-height:34px!important}
  .page-heading{align-items:flex-start!important;flex-direction:column!important;gap:10px!important;margin-bottom:13px!important}
  .page-heading h1{font-size:30px!important;line-height:1.02!important}
  .page-heading p{font-size:11px!important;line-height:1.5!important}
  .account-pill{align-self:flex-start}
  .portal-tabs{max-width:none!important;width:100%!important;position:sticky;top:61px;z-index:50;background:var(--canvas);padding:4px!important}
  .panel{border-radius:17px!important}
  .route-aside{
    margin:0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:0;
  }
  .request-map-shell{min-height:280px}
  .form-column{padding:16px!important}
  .panel-head{margin-bottom:15px!important}
  .form-grid,.subgrid{grid-template-columns:1fr!important;gap:11px!important}
  .form-grid>.full,.subgrid>.full{grid-column:auto!important}
  .subgrid{padding:11px!important}
  input,select,textarea{font-size:16px!important;min-height:50px!important}
  .primary-btn{min-height:51px!important;font-size:12px!important}
  .orders-toolbar{align-items:flex-start!important;flex-direction:column!important;gap:12px!important}
  .order-tabs{width:100%!important}
  .orders-grid{grid-template-columns:1fr!important}
  .tracking-panel{padding:14px!important;border-radius:17px!important}
  .tracking-head{flex-direction:column!important;gap:10px!important}
  .tracking-head h2{font-size:25px!important}
  .tracking-grid{grid-template-columns:1fr!important}
  .map-wrap,.map-placeholder{min-height:330px!important}
  .stepper{overflow-x:auto;grid-template-columns:repeat(6,minmax(74px,1fr))!important;padding-bottom:6px;scrollbar-width:none}
  .stepper::-webkit-scrollbar{display:none}
  .live-strip{align-items:flex-start!important;flex-direction:column!important;gap:6px!important}
}

@media(max-width:560px){
  .auth-shell{display:flex!important;flex-direction:column!important;min-height:0!important;border-radius:18px!important}
  .auth-map-panel{min-height:245px!important}
  .auth-map-copy{left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;padding:13px!important}
  .auth-map-copy h2{font-size:20px!important}
  .auth-map-copy p{display:none}
  .auth-network-stats{margin-top:10px!important}
  .auth-network-stats div{padding:8px!important}
  .auth-card{padding:22px 17px 24px!important}
  .auth-icon{margin-bottom:14px!important}
  .auth-card h1{font-size:29px!important}
  .panel-head{flex-direction:column!important;gap:8px!important}
  .step-pill{align-self:flex-start}
  .quote-card{padding:17px!important}
  .quote-card>strong{font-size:24px!important}
  .detail-card{padding:12px!important}
}