/* ZABR central compact form UX — driver + building + modal forms
   Principles: one task at a time, compact reading width, 44px+ touch targets,
   short vertical rhythm, no needlessly full-width short controls. */

:root{--zabr-form-control-h:52px;--zabr-form-gap:10px;--zabr-form-radius:14px}

/* Wizard steps must fit their content; old fixed 300/330px heights wasted screen space. */
.zabr-form-ux .wizard-step,
.zabr-form-ux .work-wizard-step{
  min-height:0!important;
  padding-top:2px!important;
  padding-bottom:6px!important;
}
.zabr-form-ux .wizard-card{
  padding:13px!important;
  border-radius:18px!important;
  margin-bottom:8px!important;
}
.zabr-form-ux .wizard-question,
.zabr-form-ux .work-wizard-step>h3{
  font-size:19px!important;
  line-height:1.45!important;
  margin:4px 0 3px!important;
}
.zabr-form-ux .wizard-hint,
.zabr-form-ux .work-wizard-step>p{
  font-size:12.5px!important;
  line-height:1.65!important;
  margin:0 0 10px!important;
}
.zabr-form-ux .work-step-icon{
  width:52px!important;
  height:52px!important;
  border-radius:17px!important;
  font-size:27px!important;
  margin:2px auto 6px!important;
}
.zabr-form-ux .step-speak{
  min-height:44px!important;
  margin:6px auto 10px!important;
  padding:6px 10px!important;
  font-size:11.5px!important;
}

/* Compact progress / carried-forward answers. */
.zabr-form-ux>.wizard-meta,
.zabr-form-ux>.work-wizard-meta{
  padding-top:6px!important;
  padding-bottom:7px!important;
  margin-bottom:8px!important;
}
.zabr-form-ux .wizard-count,
.zabr-form-ux .work-wizard-count{
  margin-bottom:5px!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
.zabr-form-ux .wizard-bar,
.zabr-form-ux .work-wizard-bar{height:6px!important}
.zabr-form-ux .zabr-wizard-trail{margin-top:6px!important}
.zabr-form-ux .zabr-wizard-trail-chip{
  padding:4px 7px!important;
  font-size:10.5px!important;
  max-width:125px!important;
}
.zabr-form-ux .draft-note{
  min-height:0!important;
  margin:6px 0 8px!important;
  padding:7px 10px!important;
  border-radius:12px!important;
  font-size:10.5px!important;
  line-height:1.55!important;
}

/* Field rhythm. */
.zabr-form-ux .grid,
.zabr-form-ux .field-pair{gap:var(--zabr-form-gap)!important}
.zabr-form-ux .field{margin-bottom:9px!important;min-width:0!important}
.zabr-form-ux label:not(.check):not(.btn){
  margin:7px 0 5px!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.zabr-form-ux input:not([type=checkbox]):not([type=radio]):not([type=file]),
.zabr-form-ux select,
.zabr-form-ux textarea,
.zabr-form-ux .jcal-trigger{
  min-height:var(--zabr-form-control-h)!important;
  border-radius:var(--zabr-form-radius)!important;
  font-size:16px!important;
  padding:10px 12px!important;
}
.zabr-form-ux textarea{
  min-height:78px!important;
  resize:vertical!important;
}
.zabr-form-ux .field-help,
.zabr-form-ux .rate-help,
.zabr-form-ux .hint{
  font-size:10.5px!important;
  line-height:1.55!important;
  margin-top:4px!important;
}

/* Short data should look short. This is the main fix for dates/phones/numbers. */
.zabr-form-ux [data-zabr-kind="date"] input[type=date],
.zabr-form-ux [data-zabr-kind="date"] .jcal-trigger{
  width:min(100%,320px)!important;
  max-width:320px!important;
  margin-inline-start:0!important;
  margin-inline-end:auto!important;
}
.native-date-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.zabr-form-ux .zabr-jalali-trigger{
  width:100%!important;max-width:none!important;text-align:right!important;
  background:#091820!important;border:1px solid rgba(42,212,240,.22)!important;color:#e8faff!important;font-weight:900!important;
}
.zabr-jalali-panel{
  margin-top:8px;padding:10px;border-radius:18px;border:1px solid rgba(42,212,240,.18);
  background:#0b1720;box-shadow:0 16px 36px rgba(0,0,0,.28);direction:rtl
}
.zabr-jalali-head{display:grid;grid-template-columns:46px 1fr 46px;gap:7px;align-items:center;margin-bottom:8px}
.zabr-jalali-head>button{height:44px;border-radius:13px;background:#12232d;border:1px solid rgba(255,255,255,.08);color:#eafcff;font-size:24px}
.zabr-jalali-head>strong{text-align:center;font-size:15px;color:#f3fbff}
.zabr-jalali-week,.zabr-jalali-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.zabr-jalali-week{margin-bottom:4px}.zabr-jalali-week span{text-align:center;color:#8199a3;font-size:10px;font-weight:800;padding:4px 0}
.zabr-jalali-grid button{height:39px;border-radius:11px;background:#0d1d26;border:1px solid rgba(255,255,255,.06);color:#dcecf1;font-size:12px;font-weight:900}
.zabr-jalali-grid button.mute{visibility:hidden}.zabr-jalali-grid button.selected{background:rgba(42,212,240,.18);border-color:rgba(42,212,240,.55);color:#fff}.zabr-jalali-grid button.today{box-shadow:inset 0 0 0 2px rgba(46,227,168,.42)}
.zabr-jalali-foot{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.zabr-jalali-foot button{min-height:44px;border-radius:13px;font-weight:900;background:#12232d;border:1px solid rgba(255,255,255,.08);color:#dffbff}
.zabr-form-ux [data-zabr-kind="phone"] input{
  width:min(100%,300px)!important;
  max-width:300px!important;
  direction:ltr!important;
  text-align:left!important;
}
.zabr-form-ux [data-zabr-kind="number"] input,
.zabr-form-ux .amount-wrap,
.zabr-form-ux .rate-input-wrap{
  width:min(100%,320px)!important;
  max-width:320px!important;
}
.zabr-form-ux [data-zabr-kind="text"] input,
.zabr-form-ux [data-zabr-kind="choice"] select,
.zabr-form-ux [data-zabr-kind="choice"] .place-input-wrap{
  width:min(100%,390px)!important;
  max-width:390px!important;
}
.zabr-form-ux [data-zabr-kind="address"] input{width:min(100%,460px)!important;max-width:460px!important}
.zabr-form-ux [data-zabr-kind="long"] textarea{width:100%!important;max-width:100%!important}

/* Choice buttons: large enough to tap, but no oversized empty cards. */
.zabr-form-ux .choice-grid,
.zabr-form-ux .cargo-choice-grid,
.zabr-form-ux .flow-choice-list,
.zabr-form-ux .work-choice-grid{
  gap:8px!important;
}
.zabr-form-ux .choice-btn,
.zabr-form-ux .cargo-choice-btn,
.zabr-form-ux .flow-choice,
.zabr-form-ux .work-choice{
  min-height:76px!important;
  border-radius:16px!important;
  padding:9px 8px!important;
}
.zabr-form-ux .flow-choice span,
.zabr-form-ux .work-choice span{font-size:27px!important}
.zabr-form-ux .flow-choice b,
.zabr-form-ux .work-choice b{font-size:13.5px!important;line-height:1.45!important}

/* Upload/summary blocks were much taller than needed. */
.zabr-form-ux .upload{
  min-height:104px!important;
  border-radius:15px!important;
}
.zabr-form-ux .preview{margin:7px 0!important}
.zabr-form-ux .preview img,
.zabr-form-ux .preview video{
  width:92px!important;
  height:92px!important;
}
.zabr-form-ux .work-confirm-box,
.zabr-form-ux .wizard-summary{
  padding:11px!important;
  margin:8px 0!important;
  border-radius:15px!important;
  font-size:13px!important;
  line-height:1.7!important;
}
.zabr-form-ux details.more-box{margin-top:8px!important}
.zabr-form-ux details.more-box>summary{
  min-height:44px!important;
  padding:8px 10px!important;
  font-size:12px!important;
}

/* Central navigation stays obvious and thumb-friendly, without taking a large strip. */
.zabr-form-ux .zabr-wizard-top-actions{
  gap:8px!important;
  margin-top:7px!important;
  padding-top:7px!important;
}
.zabr-form-ux .zabr-wizard-top-actions button,
.zabr-form-ux button[type=submit].submit,
.zabr-form-ux .work-wizard-submit{
  min-height:52px!important;
  border-radius:14px!important;
  font-size:14px!important;
  font-weight:900!important;
}

/* Non-wizard modal/report forms also use the same compact field sizing. */
.zabr-form-ux.report-form,
dialog .zabr-form-ux:not(.work-wizard){
  --zabr-form-control-h:50px;
}
.zabr-form-ux.report-form .field,
dialog .zabr-form-ux:not(.work-wizard) .field{margin-bottom:9px!important}

/* Mobile keeps compact multi-column short fields. Auto-fit falls back to
   one column only when the actual container is too narrow. */
@media(max-width:600px){
  .zabr-form-ux .wizard-card{padding:12px!important}
  .zabr-form-ux .wizard-question,
  .zabr-form-ux .work-wizard-step>h3{font-size:18px!important}
  .zabr-form-ux [data-zabr-kind="date"] .jcal-trigger{max-width:300px!important}
}
@media(max-width:360px){
  .zabr-form-ux .choice-grid,
  .zabr-form-ux .cargo-choice-grid,
  .zabr-form-ux .flow-choice-list,
  .zabr-form-ux .work-choice-grid{gap:7px!important}
  .zabr-form-ux .choice-btn,
  .zabr-form-ux .cargo-choice-btn,
  .zabr-form-ux .flow-choice,
  .zabr-form-ux .work-choice{min-height:72px!important}
}

/* ZABR adaptive field layout v4: fit short fields side-by-side, keep bank/account/media/text long full row. */
.zabr-form-ux .grid,.zabr-form-ux .field-pair{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr))!important;
  gap:10px!important;align-items:start!important;
}
.zabr-form-ux .grid>.field,.zabr-form-ux .field-pair>.field{grid-column:auto!important;margin-bottom:0!important}
.zabr-form-ux .field.full,
.zabr-form-ux .grid>.field.full,
.zabr-form-ux [data-zabr-kind="long"],
.zabr-form-ux [data-zabr-kind="address"],
.zabr-form-ux [data-zabr-kind="media"],
.zabr-form-ux [data-zabr-kind="account"],
.zabr-form-ux .payment-details-host,
.zabr-form-ux [data-payment-details],
.zabr-form-ux .upload,
.zabr-form-ux .wizard-summary,
.zabr-form-ux details.more-box,
.zabr-form-ux .choice-grid,
.zabr-form-ux .cargo-choice-grid,
.zabr-form-ux .work-choice-grid{
  grid-column:1/-1!important;
}
.zabr-form-ux .payment-details-host .grid,.zabr-form-ux [data-payment-details] .grid{grid-template-columns:1fr!important}
.zabr-form-ux .bank-input,.zabr-form-ux .bank-segments,.zabr-form-ux .bank-account-single{width:100%!important;max-width:100%!important}
@media(max-width:600px){
  .zabr-form-ux .grid,.zabr-form-ux .field-pair{grid-template-columns:repeat(auto-fit,minmax(min(148px,100%),1fr))!important}
}
@media(max-width:335px){
  .zabr-form-ux .grid,.zabr-form-ux .field-pair{grid-template-columns:1fr!important}
}

/* Central single-column mobile wizard mode.
   Flows opt in with data-zabr-mobile-flow="single"; the mobile engine also
   respects this marker and will not re-pack its fields into a dense grid. */
@media(max-width:600px){
  .zabr-form-ux[data-zabr-mobile-flow="single"],
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-step,
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-card,
  .zabr-form-ux[data-zabr-mobile-flow="single"] .field{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-card{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    align-content:start!important;gap:8px!important;padding:12px!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-card>*{
    grid-column:1/-1!important;min-width:0!important;max-width:100%!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] :is(input,select,textarea,.amount-wrap,.jcal-trigger,.zabr-jalali-trigger,.zabr-jalali-panel){
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-question{
    font-size:18px!important;line-height:1.45!important;margin:2px 0!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-hint{
    font-size:12px!important;line-height:1.75!important;margin:0 0 6px!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-actions{
    position:sticky!important;bottom:0!important;z-index:8!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;margin:14px -4px -4px!important;
    padding:10px 4px calc(8px + env(safe-area-inset-bottom,0px))!important;
    background:linear-gradient(180deg,rgba(11,22,32,0),#0b1620 28%,#0b1620 100%)!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-actions:has(>button:only-child){
    grid-template-columns:minmax(0,1fr)!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-actions button{
    width:100%!important;min-height:54px!important;font-size:14px!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .zabr-jalali-panel{
    padding:10px!important;border-radius:16px!important;box-shadow:none!important;
  }
  .zabr-form-ux[data-zabr-mobile-flow="single"] .zabr-jalali-grid button{
    min-width:0!important;height:42px!important;font-size:13px!important;
  }
}
@media(max-width:360px){
  .zabr-form-ux[data-zabr-mobile-flow="single"] .wizard-card{padding:10px!important}
  .zabr-form-ux[data-zabr-mobile-flow="single"] .zabr-jalali-grid{gap:3px!important}
  .zabr-form-ux[data-zabr-mobile-flow="single"] .zabr-jalali-grid button{height:39px!important;font-size:12px!important}
}

/* Central virtual-keyboard layout v3 — adaptive per client.
   iOS overlays the keyboard and needs a scroll runway.
   Android Chrome/WebView normally RESIZES the visual viewport, so adding the
   keyboard height again creates a huge empty area. */
:root{
  --zabr-vv-h:100dvh;
  --zabr-vv-top:0px;
  --zabr-keyboard-h:0px;
  --zabr-kb-runway:24px;
  --zabr-kb-scroll-bottom:34px;
}
html.zabr-platform-ios{
  --zabr-kb-runway:calc(var(--zabr-keyboard-h) + 38px);
  --zabr-kb-scroll-bottom:calc(var(--zabr-keyboard-h) + 34px);
}
html.zabr-platform-android{
  --zabr-kb-runway:18px;
  --zabr-kb-scroll-bottom:24px;
}
html.zabr-keyboard-open,
body.zabr-keyboard-open{
  overscroll-behavior-y:contain;
}
html.zabr-keyboard-open :is(
  .sheet-panel,.worker-sheet,.admin-sheet,.tf-sheet,.dialog-body,.page,dialog
).zabr-kb-scroll{
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-padding-top:84px!important;
  scroll-padding-bottom:var(--zabr-kb-scroll-bottom)!important;
}
/* Android: size the active surface to the ACTUAL space above the client keyboard.
   This removes the fake blank area and follows Gboard/Samsung/custom keyboards. */
html.zabr-platform-android.zabr-keyboard-open .sheet.open,
html.zabr-platform-android.zabr-keyboard-open .overlay.open{
  top:var(--zabr-vv-top)!important;
  bottom:auto!important;
  height:var(--zabr-vv-h)!important;
  max-height:var(--zabr-vv-h)!important;
}
html.zabr-platform-android.zabr-keyboard-open :is(
  .sheet-panel,.worker-sheet,.admin-sheet,.tf-sheet,dialog
).zabr-kb-scroll{
  max-height:calc(var(--zabr-vv-h) - 4px)!important;
}
/* Only iOS gets a keyboard-sized runway. Android gets a tiny natural tail. */
html.zabr-keyboard-open .zabr-kb-scroll::after{
  content:"";
  display:block;
  width:1px;
  height:var(--zabr-kb-runway);
  min-height:var(--zabr-kb-runway);
  pointer-events:none;
}
html.zabr-keyboard-open .zabr-form-ux input:focus,
html.zabr-keyboard-open .zabr-form-ux textarea:focus,
html.zabr-keyboard-open .zabr-form-ux select:focus{
  scroll-margin-top:88px;
  scroll-margin-bottom:28px;
}
html.zabr-keyboard-open .zabr-form-ux .wizard-actions{
  position:static!important;
}

/* Shared wizard foundation for forms outside the driver page as well. */
.zabr-form-ux .wizard-step{display:none!important}
.zabr-form-ux .wizard-step.active{display:block!important}
.zabr-form-ux .wizard-card{border:1px solid rgba(145,180,190,.18);background:rgba(16,37,48,.78);color:#eff9fc}
.zabr-form-ux .wizard-question{font-weight:900;color:#f2fbfd}
.zabr-form-ux .wizard-actions{display:flex;gap:8px}
.zabr-form-ux .wizard-actions button{min-height:48px;border-radius:13px}
.zabr-form-ux .wizard-bar{background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.zabr-form-ux .wizard-fill{display:block;height:100%;border-radius:99px}

/* Shared visual selectors used by all forms, including building and driver. */
.zabr-form-ux .zabr-choice-select{position:absolute!important;width:1px!important;height:1px!important;min-height:1px!important;opacity:0!important;pointer-events:none!important;padding:0!important;border:0!important}
.zabr-form-ux .zabr-choice-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))!important;gap:8px!important;width:100%;margin:4px 0 8px}
.zabr-form-ux .zabr-choice-grid .work-choice{width:100%;min-width:0;min-height:88px!important;cursor:pointer;touch-action:manipulation}
.zabr-form-ux .zabr-choice-grid .work-choice b{overflow-wrap:anywhere}
.zabr-form-ux .zabr-choice-grid .work-choice .zabr-svg-icon{width:30px;height:30px;flex:none}
.zabr-form-ux .zabr-choice-search{margin:3px 0 9px;max-width:100%}
.zabr-form-ux .field:has(>.zabr-choice-grid){grid-column:1/-1!important}
@media(max-width:600px){.zabr-form-ux .zabr-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

.zabr-form-ux .field.field-error>.zabr-choice-grid{outline:2px solid rgba(255,107,124,.68);outline-offset:3px;border-radius:16px}
.zabr-form-ux .zabr-choice-grid .work-choice[hidden]{display:none!important}