/* SERVE_DRIVER_ASSIGNMENT_4A_20260929 */


.serve-order-driver-assignment{
 margin:
  10px 0 8px;
}


.serve-order-driver-button{
 width:100%;
 min-height:42px;

 display:flex;
 align-items:center;

 gap:9px;

 box-sizing:border-box;

 padding:
  8px 10px;

 border:
  1px solid #dedee3;

 border-radius:11px;

 background:#f7f7f8;
 color:#111;

 font:inherit;

 text-align:left;

 cursor:pointer;
}


.serve-order-driver-button:hover{
 background:#f0f0f2;
}


.serve-order-driver-button.assigned{
 background:#f4f7f5;
}


.serve-order-driver-icon{
 flex:0 0 auto;

 font-size:11px;
}


.serve-order-driver-copy{
 min-width:0;

 display:flex;
 flex:1;
 flex-direction:column;
}


.serve-order-driver-copy small{
 color:#85858b;

 font-size:8px;
 font-weight:700;
}


.serve-order-driver-copy b{
 overflow:hidden;

 font-size:10px;
 font-weight:800;

 text-overflow:ellipsis;
 white-space:nowrap;
}


.serve-order-driver-arrow{
 color:#8e8e93;

 font-size:18px;
 line-height:1;
}


.serve-driver-assignment-overlay{
 position:fixed;
 inset:0;

 z-index:9100;

 display:none;
 align-items:center;
 justify-content:center;

 box-sizing:border-box;

 padding:24px;

 background:
  rgba(20,20,24,.30);

 backdrop-filter:
  blur(5px);
}


.serve-driver-assignment-overlay.open{
 display:flex;
}


.serve-driver-assignment-modal{
 position:relative;

 width:
  min(
   520px,
   calc(100vw - 32px)
  );

 max-height:
  calc(100vh - 48px);

 overflow:auto;

 box-sizing:border-box;

 padding:24px;

 border:
  1px solid #e0e0e5;

 border-radius:22px;

 background:#fff;

 box-shadow:
  0 28px 80px
  rgba(0,0,0,.18);
}


.serve-driver-assignment-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;

 gap:20px;
}


.serve-assignment-eyebrow{
 display:block;

 margin-bottom:5px;

 color:#85858b;

 font-size:9px;
 font-weight:800;

 letter-spacing:.04em;

 text-transform:uppercase;
}


.serve-driver-assignment-head h2{
 margin:0;

 font-size:21px;
 line-height:1.2;
}


.serve-driver-assignment-head p{
 margin:
  5px 0 0;

 color:#77777d;

 font-size:10px;
}


.serve-assignment-close{
 width:38px;
 height:38px;

 flex:0 0 auto;

 display:grid;
 place-items:center;

 border:0;
 border-radius:50%;

 background:#f1f1f3;
 color:#111;

 font-size:21px;

 cursor:pointer;
}


.serve-assignment-current{
 display:flex;
 align-items:center;
 justify-content:space-between;

 gap:16px;

 margin:
  20px 0 12px;

 padding:
  12px 14px;

 border-radius:12px;

 background:#f5f5f7;
}


.serve-assignment-current span{
 color:#85858b;

 font-size:9px;
 font-weight:700;
}


.serve-assignment-current b{
 font-size:11px;
}


.serve-assignment-list{
 display:flex;
 flex-direction:column;

 gap:7px;
}


.serve-assignment-driver{
 width:100%;

 display:grid;

 grid-template-columns:
  10px
  minmax(0,1fr)
  auto
  18px;

 align-items:center;

 gap:10px;

 box-sizing:border-box;

 min-height:54px;

 padding:
  9px 11px;

 border:
  1px solid #e2e2e7;

 border-radius:12px;

 background:#fff;
 color:#111;

 font:inherit;

 text-align:left;

 cursor:pointer;
}


.serve-assignment-driver:hover{
 background:#f7f7f8;
}


.serve-assignment-driver.selected{
 background:#f4f5f6;
}


.serve-assignment-presence{
 width:8px;
 height:8px;

 border-radius:50%;

 background:#a4a4aa;
}


.serve-assignment-presence.ready{
 background:#34c759;
}


.serve-assignment-presence.online{
 background:#0a84ff;
}


.serve-assignment-presence.planned{
 background:#ff9f0a;
}


.serve-assignment-driver-copy{
 min-width:0;

 display:flex;
 flex-direction:column;
}


.serve-assignment-driver-copy b{
 overflow:hidden;

 font-size:11px;
 font-weight:800;

 text-overflow:ellipsis;
 white-space:nowrap;
}


.serve-assignment-driver-copy small{
 margin-top:2px;

 color:#909096;

 font-size:8px;
}


.serve-assignment-driver-status{
 color:#77777d;

 font-size:9px;
 font-weight:650;

 white-space:nowrap;
}


.serve-assignment-check{
 color:#8e8e93;

 font-size:15px;
 text-align:right;
}


.serve-assignment-clear{
 width:100%;

 margin-top:14px;

 min-height:40px;

 border:
  1px solid #dedee3;

 border-radius:11px;

 background:#fff;
 color:#55555b;

 font:inherit;
 font-size:10px;
 font-weight:750;

 cursor:pointer;
}


.serve-assignment-clear:hover{
 background:#f5f5f7;
}


.serve-assignment-clear.hidden{
 display:none;
}


.serve-assignment-empty{
 padding:18px;

 border-radius:12px;

 background:#f5f5f7;
 color:#77777d;

 font-size:10px;

 text-align:center;
}


@media(max-width:700px){

 .serve-driver-assignment-overlay{
  padding:14px;
 }


 .serve-driver-assignment-modal{
  width:
   calc(100vw - 28px);

  padding:20px;
 }


 .serve-assignment-driver{
  grid-template-columns:
   10px
   minmax(0,1fr)
   18px;
 }


 .serve-assignment-driver-status{
  display:none;
 }

}