/* Shared components of the driver app: cards, buttons, chips, pills, fields, dialogs, tab bar ... (1rem = 10dp) */

/* ============================== cards ============================== */
.card{
  --tint:transparent;
  position:relative;
  background:var(--surface);
  background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 11%,transparent),transparent 62%),var(--surface);
  border:1px solid var(--outline);
  border-color:color-mix(in srgb,var(--tint) 36%,var(--outline));
  border-radius:var(--r-card);
  box-shadow:0 .2rem .8rem rgba(127,156,136,.30),0 .6rem 1.6rem -.6rem rgba(127,156,136,.28);
  padding:1.8rem;
}
.card.flat{padding:0}
.card.tight{padding:1.4rem}
.card.click{cursor:pointer;transition:transform .16s var(--ease)}
.card.click:active,.pressable:active{transform:scale(.965)}
.tint-green{--tint:var(--taxi-fill)}.tint-blue{--tint:var(--sky)}.tint-violet{--tint:var(--violet)}.tint-coral{--tint:var(--coral)}.tint-amber{--tint:var(--amber)}
.card.tint-coral{background:linear-gradient(135deg,rgba(225,29,72,.10),transparent 62%),var(--surface)}

/* The green gradient of the balance cards: glow underneath, white text on top */
.green-card{
  position:relative;color:#fff;border-radius:2.6rem;
  background:linear-gradient(135deg,#23B65A,#14923F 55%,#0B7A33);
  box-shadow:0 1.2rem 2.6rem -.6rem rgba(22,163,74,.55);
  overflow:hidden;
}
.pressable{transition:transform .16s var(--ease)}

/* ============================== buttons ============================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  height:5.6rem;padding:0 1.8rem;border-radius:var(--r-btn);
  font-weight:700;font-size:1.5rem;letter-spacing:.02rem;white-space:nowrap;
  transition:transform .16s var(--spring),box-shadow .2s,opacity .2s;
  user-select:none;-webkit-user-select:none;overflow:hidden;
}
.btn:active:not([disabled]){transform:scale(.965)}
.btn .mi{font-size:2rem}
.btn-block{display:flex;width:100%}
.btn-taxi{
  color:var(--on-taxi);background:var(--gradient);
  box-shadow:0 1.4rem 2.4rem -1rem rgba(22,163,74,.7),0 .2rem .8rem rgba(22,163,74,.25);
}
.btn-taxi::after{ /* a band of light sweeps over the main button twice after it appears */
  content:'';position:absolute;inset:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-130%);animation:sg-sheen 1.1s linear .35s 2 both;pointer-events:none;
}
.btn-glass{
  color:var(--text-hi);height:5.2rem;background:var(--surface);
  border:1px solid var(--outline);box-shadow:0 .2rem .8rem rgba(127,156,136,.22);
}
.btn-glass.danger{color:var(--coral)}
.btn-danger{color:#fff;background:var(--coral);box-shadow:0 1.4rem 2.4rem -1rem rgba(225,29,72,.6)}
.btn-danger::after{display:none}
.btn-sm{height:4rem;font-size:1.4rem;padding:0 1.4rem;border-radius:1.4rem}
.btn-md{height:4.6rem;font-size:1.5rem}
.btn[disabled],.btn.disabled{background:rgba(22,38,29,.08);color:var(--text-lo);box-shadow:none;pointer-events:none}
.btn[disabled]::after{display:none}
.btn.loading{pointer-events:none;color:transparent!important}
.btn.loading::before{
  content:'';position:absolute;width:2.2rem;height:2.2rem;border-radius:50%;
  border:.25rem solid rgba(255,255,255,.4);border-top-color:#fff;animation:sg-spin .8s linear infinite;
}
.btn-glass.loading::before{border-color:rgba(22,38,29,.18);border-top-color:var(--taxi-fill)}

/* round glass icon button */
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:4.6rem;height:4.6rem;border-radius:50%;background:var(--surface);
  border:1px solid var(--outline);box-shadow:0 .2rem .8rem rgba(127,156,136,.22);
  transition:transform .16s var(--spring);
}
.icon-btn:active{transform:scale(.9)}
.icon-btn .mi{font-size:2.2rem}
.icon-btn.sm{width:4.2rem;height:4.2rem}
.icon-btn.coral{color:var(--coral)}
.icon-btn .badge{position:absolute;top:-.4rem;right:-.4rem}

/* ============================== chips & pills ============================== */
.chip{
  display:inline-flex;align-items:center;gap:.6rem;flex:none;
  height:3.6rem;padding:0 1.4rem;border-radius:1.9rem;
  font-weight:600;font-size:1.3rem;white-space:nowrap;
  background:var(--surface);border:1px solid var(--outline);color:var(--text-hi);
  box-shadow:0 .1rem .4rem rgba(127,156,136,.16);
  transition:background .2s,color .2s,transform .3s var(--spring),padding .2s;
}
.chip .mi{font-size:1.6rem}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--taxi-fill);border-color:var(--taxi-fill);color:#fff;padding:0 1.6rem}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  --c:var(--taxi);
  padding:.4rem 1rem;border-radius:5rem;font-weight:600;font-size:1.2rem;white-space:nowrap;
  color:var(--c);
  background:rgba(22,163,74,.16);border:1px solid rgba(22,163,74,.28);
  background:color-mix(in srgb,var(--c) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 28%,transparent);
}
.pill.blue{background:rgba(37,99,235,.16);border-color:rgba(37,99,235,.28)}
.pill.violet{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.28)}
.pill.red{background:rgba(225,29,72,.16);border-color:rgba(225,29,72,.28)}
.pill.amber{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.28)}
.pill.grey{background:rgba(103,117,109,.16);border-color:rgba(103,117,109,.28)}
@supports (background:color-mix(in srgb,red 10%,blue)){
  .pill.blue,.pill.violet,.pill.red,.pill.amber,.pill.grey{background:color-mix(in srgb,var(--c) 16%,transparent);border-color:color-mix(in srgb,var(--c) 28%,transparent)}
}
.pill .mi{font-size:1.3rem}
.pill.green{--c:var(--mint)}.pill.blue{--c:var(--sky)}.pill.violet{--c:var(--violet)}.pill.red{--c:var(--coral)}.pill.amber{--c:var(--amber)}.pill.grey{--c:var(--text-lo)}

/* A status pill with a breathing dot: «Нав» (outlined) / «Дар роҳ» (filled) */
.live-pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .9rem;border-radius:5rem;
  font-weight:600;font-size:1.2rem;white-space:nowrap;
  color:var(--text-hi);background:rgba(228,245,234,.5);border:1.5px solid var(--taxi-fill);
}
.live-pill::before{content:'';width:.7rem;height:.7rem;border-radius:50%;background:var(--taxi-fill);animation:sg-pulse .9s ease-in-out infinite alternate}
.live-pill.filled{color:#fff;background:var(--taxi-fill)}
.live-pill.filled::before{background:#fff}
.star-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;border-radius:5rem;font-weight:700;font-size:1.2rem;color:var(--violet);background:var(--violet-soft)}
.star-pill .mi{font-size:1.4rem}

/* Red counters on a tab / an icon (PopBadge) */
.badge{
  --c:var(--coral);
  min-width:1.9rem;height:1.9rem;padding:0 .5rem;border-radius:1rem;background:var(--c);color:#fff;
  font-weight:700;font-size:1.1rem;line-height:1.9rem;text-align:center;
  box-shadow:0 .2rem .6rem color-mix(in srgb,var(--c) 55%,transparent);
  transition:transform .25s var(--spring);
}
.badge.zero{transform:scale(0);pointer-events:none}
.badge.pop{animation:sg-pop .5s var(--ease)}
.badge.sky{--c:var(--sky)}.badge.violet{--c:var(--violet)}.badge.mint{--c:var(--mint)}

/* ============================== avatar ============================== */
.avatar{
  --s:4.8rem;
  position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;
  padding:.3rem;background:conic-gradient(#34D17A,#0E7C38,#16A34A,#34D17A);
}
.avatar.plain{padding:0;background:none}
.avatar.ring-online{background:var(--taxi-fill)}
.avatar.ring-grey{background:var(--surface-lo)}
.avatar>.in{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--green-soft);display:flex;align-items:center;justify-content:center;border:.2rem solid var(--surface)}
.avatar.plain>.in{border:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .ini{font-weight:700;color:var(--taxi);font-size:calc(var(--s) * .34)}
.avatar .mi{font-size:calc(var(--s) * .5);color:var(--text-lo)}
.avatar .dot{position:absolute;right:.1rem;bottom:.1rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--taxi-fill);border:.25rem solid #fff}

/* ============================== fields ============================== */
.field-label{display:block;font-weight:500;font-size:1.2rem;letter-spacing:.02rem;color:var(--text-mid);padding:0 .4rem .7rem;transition:color .2s}
.field:focus-within .field-label{color:var(--taxi)}
.input-surface{
  display:flex;align-items:center;gap:1rem;min-height:5.4rem;padding:1.3rem 1.4rem;
  border-radius:var(--r-field);background:var(--surface-hi);border:1px solid rgba(22,38,29,.16);
  transition:background .2s,border-color .2s,box-shadow .22s;
}
.input-surface:focus-within{background:#fff;border-color:var(--taxi-fill);box-shadow:0 0 0 .4rem rgba(22,163,74,.2),inset 0 0 0 .05rem var(--taxi-fill)}
.input-surface.error{background:var(--red-soft);border-color:var(--coral);box-shadow:0 0 0 .4rem rgba(225,29,72,.1)}
.input-surface .mi{font-size:2rem;color:var(--text-lo)}
.input-surface:focus-within .mi{color:var(--taxi-fill)}
.input-surface input,.input-surface textarea,.input-surface select{flex:1;min-width:0;width:100%;font-size:1.6rem;line-height:2.3rem;caret-color:var(--taxi-fill)}
.input-surface textarea{resize:none;min-height:2.3rem}
.input-surface .prefix{font-weight:600;color:var(--text-mid);white-space:nowrap}
.input-surface select{padding-right:2.4rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2367756D' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right center/2rem no-repeat}
input::placeholder,textarea::placeholder{color:var(--text-lo);opacity:.75}
.search-bar{display:flex;align-items:center;gap:1rem;min-height:4.6rem;padding:0 1.4rem;border-radius:2.3rem;background:var(--surface-hi);border:1px solid rgba(22,38,29,.16);transition:background .2s,border-color .2s,box-shadow .22s}
.search-bar:focus-within{background:#fff;border-color:var(--taxi-fill);box-shadow:0 0 0 .4rem rgba(22,163,74,.2),inset 0 0 0 .05rem var(--taxi-fill)}
.search-bar .mi{font-size:1.9rem;color:var(--text-lo)}
.search-bar input{flex:1;min-width:0;font-size:1.5rem}

/* the four code boxes of the sign-in */
.otp{display:flex;gap:1.2rem;justify-content:center;position:relative}
.otp .box{
  flex:1;height:6.8rem;display:flex;align-items:center;justify-content:center;
  border-radius:1.8rem;background:var(--surface-hi);border:1px solid rgba(22,38,29,.16);
  font-size:2.8rem;font-weight:800;transition:all .2s;
}
.otp .box.active{background:#fff;border-color:var(--taxi-fill);box-shadow:0 0 0 .4rem rgba(22,163,74,.2),inset 0 0 0 .05rem var(--taxi-fill)}
.otp .box.filled{border-color:rgba(22,163,74,.45)}
.otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:1.6rem}

/* ============================== switch ============================== */
.switch{position:relative;flex:none;width:5.2rem;height:3.2rem;border-radius:1.6rem;background:var(--surface-lo);transition:background .25s,box-shadow .25s;cursor:pointer}
.switch::after{content:'';position:absolute;top:.3rem;left:.3rem;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;box-shadow:0 .2rem .6rem rgba(0,0,0,.25);transition:transform .3s var(--spring)}
.switch.on{background:var(--taxi-fill);box-shadow:0 0 1.4rem rgba(22,163,74,.55)}
.switch.on::after{transform:translateX(2rem)}
.switch[disabled]{opacity:.5;pointer-events:none}

/* segmented control (two-three tabs inside a page) */
.seg{display:flex;position:relative;padding:.4rem;border-radius:1.8rem;background:var(--surface-hi);border:1px solid var(--outline)}
.seg>button{position:relative;z-index:1;flex:1;height:4rem;border-radius:1.4rem;font-weight:700;font-size:1.4rem;color:var(--text-mid);transition:color .25s}
.seg>button.on{color:#fff}
.seg .seg-pill{position:absolute;z-index:0;top:.4rem;bottom:.4rem;left:.4rem;border-radius:1.4rem;background:var(--gradient);box-shadow:0 .8rem 1.6rem -.6rem rgba(22,163,74,.6);transition:transform .35s var(--spring),width .35s var(--ease)}

/* ============================== headers ============================== */
.screen-header{
  display:flex;align-items:center;gap:1.4rem;
  padding:calc(var(--safe-top) + 1.2rem) 1.6rem .8rem 2rem;
}
.screen-header .titles{flex:1;min-width:0;animation:sg-appear .42s var(--ease) both}
.screen-header h1{font-weight:800;font-size:2.7rem;line-height:3.2rem;letter-spacing:-.03rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-header.sub h1{font-weight:700;font-size:2rem;line-height:2.6rem;letter-spacing:0}
.screen-header .subtitle{font-size:1.2rem;line-height:1.6rem;color:var(--text-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-header .actions{display:flex;align-items:center;gap:1rem}

/* title + a green count pill + a round action (Orders / Trips) */
.list-header{display:flex;align-items:center;gap:1rem;padding:calc(var(--safe-top) + 1.2rem) 1.6rem .8rem 2rem}
.list-header h1{flex:1;min-width:0;font-weight:800;font-size:2.2rem;line-height:2.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.count-pill{min-width:3.2rem;height:3.2rem;padding:0 .9rem;border-radius:1.6rem;background:var(--taxi-fill);color:#fff;font-weight:800;font-size:1.5rem;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 .6rem 1.2rem -.4rem rgba(22,163,74,.6)}

.section-title{display:flex;align-items:center;padding:.6rem 0 .2rem}
.section-title h2{flex:1;font-weight:600;font-size:1.7rem;line-height:2.2rem}
.section-title a,.section-title button.link{font-weight:500;font-size:1.2rem;letter-spacing:.02rem;color:var(--taxi);padding:.6rem;border-radius:.8rem}

.error-banner{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1.4rem;border-radius:1.4rem;
  background:linear-gradient(135deg,rgba(225,29,72,.12),transparent 70%),var(--surface);border:1px solid rgba(225,29,72,.3);
  font-size:1.4rem;line-height:2rem;animation:sg-appear .3s var(--ease) both;
}
.error-banner .mi{color:var(--coral);font-size:1.9rem}

.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(22,38,29,.10),transparent);margin:.2rem 0}

.info-line{display:flex;align-items:center;gap:1.2rem;padding:.9rem 0}
.info-line .tile{width:3.6rem;height:3.6rem;border-radius:1.2rem;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--taxi)}
.info-line .tile .mi{font-size:1.8rem}
.info-line .label{flex:1;color:var(--text-mid);font-size:1.4rem}
.info-line .value{flex:1.2;text-align:right;font-weight:600;font-size:1.4rem;overflow-wrap:anywhere}

/* ============================== empty state & skeleton ============================== */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3.6rem 2.4rem}
.empty .orb{position:relative;width:13.2rem;height:13.2rem;display:flex;align-items:center;justify-content:center}
.empty .orb::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.22),transparent 70%);animation:sg-breathe 2.6s ease-in-out infinite}
@supports (background:color-mix(in srgb,red 10%,blue)){.empty .orb::before{background:radial-gradient(circle,color-mix(in srgb,var(--c,var(--taxi)) 22%,transparent),transparent 70%)}}
.empty .orb .disc{position:relative;width:8.8rem;height:8.8rem;border-radius:50%;background:var(--surface);border:1px solid color-mix(in srgb,var(--c,var(--taxi)) 25%,var(--outline));display:flex;align-items:center;justify-content:center;box-shadow:0 .6rem 1.8rem rgba(127,156,136,.3);animation:sg-float 2.6s ease-in-out infinite;color:var(--c,var(--taxi))}
.empty .orb .disc .mi{font-size:4rem}
.empty h3{margin-top:.8rem;font-weight:600;font-size:1.7rem;line-height:2.2rem}
.empty p{margin-top:.6rem;color:var(--text-mid);font-size:1.4rem;line-height:2rem}
.empty .act{margin-top:1.8rem}

.skeleton{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--outline);padding:1.8rem;height:var(--h,15rem);box-shadow:0 .2rem .8rem rgba(127,156,136,.18)}
.skeleton::after{content:'';position:absolute;inset:0;width:60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);animation:sg-shimmer 1.3s linear infinite;animation-delay:calc(var(--i,0) * 160ms)}
.skeleton .bone{background:rgba(22,38,29,.07);border-radius:.6rem}
.skeleton .bone.circle{border-radius:50%}

/* ============================== tab bar ============================== */
.tabbar{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:50;width:100%;max-width:48rem;
  background:var(--surface);border-radius:2.8rem 2.8rem 0 0;
  box-shadow:0 -.6rem 1.8rem -.4rem rgba(127,156,136,.45);
  padding-bottom:var(--safe-bottom);
}
.tabbar .track{position:relative;display:flex;height:var(--bar-h);padding:0 .8rem}
.tabbar .slider{
  position:absolute;top:.7rem;bottom:.7rem;left:0;border-radius:2.2rem;background:var(--gradient);
  box-shadow:0 .8rem 1.6rem -.6rem rgba(22,163,74,.55);pointer-events:none;
  transition:left .5s cubic-bezier(.3,1.2,.4,1),right .28s cubic-bezier(.3,1.1,.4,1);
}
.tabbar .tab{
  position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  margin:.7rem .2rem;border-radius:2.2rem;color:var(--text-mid);font-size:1.1rem;line-height:1.3rem;font-weight:500;
  transition:color .25s,transform .16s var(--spring);
}
.tabbar .tab:active{transform:scale(.94)}
.tabbar .tab .mi{font-size:2.6rem;transition:transform .45s var(--spring)}
.tabbar .tab.on{color:#fff;font-weight:700}
.tabbar .tab.on .mi{transform:translateY(-.2rem) scale(1.14)}
.tabbar .tab .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar .tab .badge{position:absolute;top:.2rem;right:.8rem}

/* ============================== toast / dialog / sheet ============================== */
.toasts{position:fixed;left:0;right:0;bottom:calc(var(--bar-h) + var(--safe-bottom) + 1.4rem);z-index:200;display:flex;flex-direction:column;align-items:center;gap:.8rem;pointer-events:none;padding:0 1.6rem}
.toast{max-width:42rem;padding:1.2rem 1.8rem;border-radius:1.8rem;background:#0F1B14;color:#fff;font-size:1.4rem;font-weight:500;box-shadow:0 1rem 2.4rem rgba(0,0,0,.3);animation:sg-appear .3s var(--ease) both;pointer-events:auto}
.toast.err{background:var(--coral)}
.toast.ok{background:var(--taxi)}
.toast.out{opacity:0;transform:translateY(1rem);transition:all .3s}

.overlay{position:fixed;inset:0;z-index:150;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:2.2rem;animation:sg-fade .2s both}
.overlay.sheet-wrap{align-items:flex-end;padding:0}
.dialog{
  width:100%;max-width:46rem;max-height:calc(100vh - 6rem);overflow:auto;
  background:var(--surface);border:1px solid var(--outline);border-radius:2.8rem;padding:2.2rem;
  box-shadow:0 2.4rem 4.8rem rgba(15,27,20,.3);animation:sg-dialog-in .4s var(--spring) both;text-align:center;
}
.dialog .d-icon{width:6.2rem;height:6.2rem;border-radius:50%;margin:0 auto 1.4rem;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--c,var(--taxi-fill));animation:sg-pop .6s var(--ease) .1s both}
.dialog .d-icon .mi{font-size:3rem}
@supports (background:color-mix(in srgb,red 10%,blue)){.dialog .d-icon{background:color-mix(in srgb,var(--c,var(--taxi-fill)) 12%,transparent)}}
.dialog h2{font-weight:700;font-size:2rem;line-height:2.6rem}
.dialog .d-body{margin-top:1rem;text-align:center;color:var(--text-mid);font-size:1.4rem;line-height:2rem}
.dialog .d-actions{display:flex;gap:1rem;margin-top:2rem}
.dialog .d-actions>*{flex:1}
.sheet{
  width:100%;max-width:48rem;max-height:92vh;overflow:auto;background:var(--surface);border-radius:2.8rem 2.8rem 0 0;
  padding:1.2rem 1.8rem calc(var(--safe-bottom) + 2rem);animation:sg-sheet-in .38s var(--ease) both;
}
.sheet .grab{width:4rem;height:.5rem;border-radius:.3rem;background:var(--surface-lo);margin:0 auto 1.4rem}

/* pull to refresh */
.ptr{position:fixed;left:50%;top:calc(var(--safe-top) + .8rem);z-index:60;width:4rem;height:4rem;margin-left:-2rem;border-radius:50%;background:#fff;box-shadow:0 .4rem 1.2rem rgba(127,156,136,.5);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-6rem);transition:opacity .2s}
.ptr .mi{color:var(--taxi-fill);font-size:2.2rem}
.ptr.spin .mi{animation:sg-spin .8s linear infinite}

/* online/offline dot, news dots etc. */
.dot-live{width:1rem;height:1rem;border-radius:50%;background:var(--taxi-fill);box-shadow:0 0 0 .3rem rgba(22,163,74,.25);animation:sg-pulse 1.4s ease-in-out infinite alternate}

/* ============================== period picker + calendar ============================== */
.date-field{flex:1;display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem;border-radius:1.6rem;background:var(--surface);border:1px solid var(--outline);box-shadow:0 .3rem .8rem rgba(127,156,136,.28);text-align:left;min-width:0}
.date-field .mi{font-size:2.2rem;color:var(--taxi-fill)}
.date-field .col{min-width:0}
.date-field .lbl{font-size:1.1rem;line-height:1.3rem;color:var(--text-lo)}
.date-field .val{font-size:1.6rem;line-height:2rem;font-weight:700;white-space:nowrap}
.dialog.calendar{text-align:left;max-width:42rem;padding:1.8rem}
.cal-range{margin:.4rem 0 1.2rem;color:var(--taxi-fill);font-weight:600;font-size:1.5rem}
.cal-nav{display:flex;align-items:center}
.cal-nav button{width:4rem;height:4rem;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cal-nav button .mi{font-size:2.8rem}
.cal-nav button:disabled{opacity:.35}
.cal-nav button:active:not(:disabled){background:var(--surface-hi)}
.cal-title{flex:1;text-align:center;font-weight:700;font-size:1.6rem}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);margin:.6rem 0 .4rem;text-align:center;font-size:1.2rem;color:var(--text-lo)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-grid .cell{position:relative;height:4.2rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.cal-grid .cell span{position:relative;z-index:1;width:3.6rem;height:3.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cal-grid .cell.in::before{content:'';position:absolute;top:.4rem;bottom:.4rem;left:0;right:0;background:var(--green-soft)}
.cal-grid .cell.in.s::before{left:50%}
.cal-grid .cell.in.e::before{right:50%}
.cal-grid .cell.in{color:var(--taxi)}
.cal-grid .cell.end span{background:var(--taxi-fill);color:#fff;font-weight:700}
.cal-grid .cell.today:not(.end) span{box-shadow:inset 0 0 0 .15rem var(--taxi-fill);font-weight:700}
.cal-grid .cell.future{color:rgba(103,117,109,.4)}
.cal-grid .cell:disabled{cursor:default}
.date-range .scroll-x{padding-bottom:.2rem}

/* ============================== «Фармоиши нав» banner ============================== */
.incoming{
  position:fixed;left:50%;top:0;z-index:120;width:calc(100% - 2.8rem);max-width:45.2rem;
  transform:translate(-50%,0);margin-top:calc(var(--safe-top) + .8rem);
  display:flex;align-items:center;gap:1.2rem;padding:1.4rem;border-radius:2.2rem;
  background:rgba(255,255,255,.94);border:1px solid rgba(22,163,74,.36);
  box-shadow:0 2.4rem 4.4rem -1rem rgba(22,163,74,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:sg-drop .7s cubic-bezier(.3,1.4,.5,1) both;overflow:hidden;cursor:pointer;
}
.incoming::after{content:'';position:absolute;inset:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-130%);animation:sg-sheen 1.1s linear .25s 2 both;pointer-events:none}
.incoming.out{transition:all .35s var(--ease);opacity:0;transform:translate(-50%,-120%)}
.incoming .bell{position:relative;flex:none;width:4.2rem;height:4.2rem;border-radius:50%;background:var(--taxi-fill);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 1.6rem rgba(22,163,74,.6)}
.incoming .bell .mi{font-size:2.2rem;animation:sg-bell 1.8s ease-in-out infinite;transform-origin:50% 12%}
.incoming .x{flex:none;color:var(--text-mid);width:3.2rem;height:3.2rem;border-radius:50%}
.incoming .x .mi{font-size:2.2rem}
@keyframes sg-drop{from{transform:translate(-50%,-130%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes sg-bell{0%,40%,100%{transform:rotate(0)}8%{transform:rotate(18deg)}16%{transform:rotate(-16deg)}24%{transform:rotate(12deg)}32%{transform:rotate(-8deg)}}

/* ============================== full-screen gate (location) ============================== */
.gate{position:fixed;inset:0;z-index:140;background:var(--bg);overflow:auto;padding:calc(var(--safe-top) + 3.2rem) 2rem calc(var(--safe-bottom) + 2.4rem);display:flex;flex-direction:column;align-items:center}
.gate .art{width:11rem;height:11rem;border-radius:50%;background:var(--green-soft);display:flex;align-items:center;justify-content:center;color:var(--taxi-fill);margin-bottom:2rem;animation:sg-float 2.6s ease-in-out infinite}
.gate .art .mi{font-size:5.4rem}

/* ============================== number plate ============================== */
.plate{display:inline-flex;align-items:stretch;height:3.2rem;border-radius:.8rem;background:#F7F7F2;border:.2rem solid #15171C;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.18);overflow:hidden}
.plate .flag{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;padding:0 .4rem;background:#1E3E8C;color:#fff}
.plate .flag .fl{display:block;width:1.3rem;border-radius:.1rem;overflow:hidden}
.plate .flag .fl b{display:block;width:100%}
.plate .flag .fl .r{height:.3rem;background:#CC0000}.plate .flag .fl .w{height:.35rem;background:#fff}.plate .flag .fl .g{height:.3rem;background:#006600}
.plate .flag span{font-weight:700;font-size:.8rem;line-height:1rem}
.plate .no{display:flex;align-items:center;padding:0 .8rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:1.6rem;color:#15171C;white-space:nowrap}
.plate.large{height:4.6rem}
.plate.large .flag{padding:0 .6rem}
.plate.large .flag .fl{width:1.8rem}
.plate.large .flag .fl .r{height:.4rem}.plate.large .flag .fl .w{height:.5rem}.plate.large .flag .fl .g{height:.4rem}
.plate.large .flag span{font-size:1.1rem}
.plate.large .no{padding:0 1.2rem;font-size:2.4rem}